<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>潜在客户报表</title>
    <#include "../common/link.ftl">
    <script>
        $(function () {
            /*日期代码*/
            $(".input-daterange").datepicker({
                language: "zh-CN",//使用中文
                autoclose: true,//自动关闭
                todayHighlight: true,
                clearBtn: true//有清空按钮
            });
            $(".btn-chart").click(function () {
                //清空模态框的缓存，目的是点击不同的图表不会有上次点击的内容
                $('#myModal').removeData('bs.modal');
                //告诉模态框图形报表url是哪个，加载内容并且放到模态框
                var url = $(this).data('url');
                $('#myModal').modal({//加上高级查询的条件，否则图表每次都是加载全部数据
                    remote: url +"?"+$("#searchForm").serialize()
                })
                $("#myModal").modal('show');
            })
        })
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "../common/navbar.ftl">
    <!--菜单回显-->
    <#assign currentMenu="customerReport"/>
    <#include "../common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>潜在客户报表</h1>
        </section>
        <section class="content">
            <div class="box">
                <!--高级查询-->
                <div style="margin: 10px;">
                    <form class="form-inline" id="searchForm" action="/customerReport/list.do" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label for="keyword">关键字:</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" value="${qo.keyword!}"
                                   placeholder="请输入姓名/邮箱">
                        </div>
                        <#--日期插件-->
                        <div class="form-group">
                            <label>时间段查询</label>
                            <div class="input-daterange input-group" id="datepicker">
                                <#--name="beginDate" 要与CustomerReportQuery中的属性对应
                                ?string('yyyy-MM-dd') 回显功能。不写也行-->
                                <input type="text" class="input-sm form-control" name="beginDate"
                                       value="${(qo.beginDate?string('yyyy-MM-dd'))!}">
                                <span class="input-group-addon">to</span>
                                <#--name="endDate" 要与CustomerReportQuery中的属性对应-->
                                <input type="text" class="input-sm form-control" name="endDate"
                                       value="${(qo.endDate?string('yyyy-MM-dd'))!}">
                            </div>
                        </div>
                        <#--分组查询框-->
                        <div class="form-group">
                            <label for="status">分组类型:</label>
                            <select class="form-control" id="groupType" name="groupType">
                                <option value="e.name">员工</option>
                                <option value="DATE_FORMAT(c.input_time, '%Y')">
                                    年
                                </option>
                                <option value="DATE_FORMAT(c.input_time, '%Y-%m')">
                                    月
                                </option>
                                <option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">
                                    日
                                </option>
                            </select>
                            <script>
                                /*回显功能*/
                                $("#groupType").val("${qo.groupType!}")
                            </script>
                        </div>
                        <button id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>
                            查询
                        </button>
                        <button type="button" class="btn btn-warning btn-chart"
                                data-url="/customerReport/listByBar.do">
                            <span class="glyphicon glyphicon-stats"></span>柱状图
                        </button>
                        <button type="button" class="btn btn-warning btn-chart"
                                data-url="/customerReport/listByPie.do">
                            <span class="glyphicon glyphicon-dashboard"></span>饼图
                        </button>
                    </form>
                </div>
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>序号</th>
                        <th>分组类型</th>
                        <th>数量</th>
                    </tr>
                    </thead>
                    <#list result.list as entity>
                        <tr>
                            <td>${entity_index+1}</td>
                            <td>${entity.groupType!}</td>
                            <td>${entity.number!}</td>
                            <#--<td>
                                <a href="/customerReport/input.do?id=${entity.id!}" class="btn btn-info btn-xs btn_redirect">
                                    <span class="glyphicon glyphicon-pencil"></span> 编辑
                                </a>
                                <a href="#" class="btn btn-danger btn-xs btn_delete" data-id="${(entity.id)!}">
                                    <span class="glyphicon glyphicon-trash"></span> 删除
                                </a>
                            </td>-->
                        </tr>
                    </#list>
                </table>
                <!--分页-->
                <#include "../common/page.ftl">
            </div>
        </section>
    </div>
    <#include "../common/footer.ftl">
</div>
<#--模态框 显示图标-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>

</body>
</html>
